
<template>
	<view class="card">
         <view class="card_header">
         	<view class="title">
         		<up-text :lines="2" :text="props.title"></up-text>
         	</view>
			<view class="price">
				<up-text type="error" mode="price" :text="props.price" size="18px"></up-text>
				<view class="numClass">
					<up-text type="success" mode="text" text="数量:" size="12px" style="flex: 1;"></up-text>
					<up-text type="success" mode="text" :text="props.num" size="12px" style="flex:2"></up-text>
				</view>
				
			</view>
         </view>
		 <up-line color="#ff0000"></up-line>
		 <view class="card_foot">
		 	<view class="user_name">
				<view  style="margin-right: 4px; "><up-tag text="品牌:" size="mini"></up-tag></view>
				<up-text :text="props.userName" size="13" style="margin-left: 3px;width: 73px;"></up-text>
		 	</view>
			<view class="update_time">
				<view style="margin-right: 4px;"><up-tag text="发布时间:" size="mini" ></up-tag></view>
				 <up-text mode="date" :text=" props.updateTime" size="13"></up-text>
			</view>
			<view class="btn_offer">
				<up-button text="报价" icon="bell" type="primary" @click="click"></up-button>
			</view>
		 </view>
	</view>
</template>

<script setup lang="ts">
	import type {TradeInfoProps} from '@/utils/page_types'
    const props = defineProps<TradeInfoProps>()

	const click = ()=>{
		props.onClick(props.id,props.infoOpenid);
		
	}
</script>

<style scoped>
  .card{
	  display: flex;
	  flex-direction: column;
	  width: 95%;
	  height: 140px;
	  background-color: white;
	  border-radius: 6px;
	  margin: 5px auto;
	  border: 1px solid #c8c7cc;
  } 
  .card_header{
	  display: flex;
	  justify-content: space-between;
	  height: 80px;
	  align-items: center;
	  padding-left: 18px;
	  padding-right: 18px;
  }
  .title{
	  width: 70%;
	  margin-right: 8px;
  }
  .price{
	  width: 30%;
	  color: red;
	  text-align: center;
	  font-weight: bold;
	  margin-left: 10px;
  }
  .card_foot{
	  height: 60px;
	  display: flex;
	  align-items: center;
	  margin: 1px 8px;
	  justify-content: space-around;
  }
  .user_name{
	  display: flex;
  }
  .update_time{
	  display: flex;
  }
  .numClass{
	  margin-top: 4px;
	  display: flex;
  }
</style>